<template>
	<view class="location">
		<view class="content">
			<view class="location_item">
				<image :src="type === 1 ? tolong : error" mode=""></image>
			</view>

			<view class="location_item">
				<view class="noLocation">
					<text v-if="operationTime > 60">
						签退时间过长
					</text>
					<text v-if="operationTime < 15">
						签退时间过短
					</text>
					<text v-if="distance === 1">当前定位离任务梯太远</text>
				</view>

			</view>
			<view class="location_item reson">
				如继续签退，请注明原因
			</view>
			<view class="location_item area">
				<textarea v-if="modalShow" type="textarea" v-model="desc" placeholder="请填写原因，例:定位不准、无信号、补签"
					style="width: 468rpx;height: 104rpx" />
			</view>
		</view>
		<view class="bottom">
			<view class="cancle" @click="() => { $emit('cancle'), desc = '' }">
				好的
			</view>
			<view class="comfire" @click="comfire">
				继续签退
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 类型:距离太远还是回去不到定位,1距离太远,2获取不到定位
		type: {
			type: Number,
			default: 1
		},
		modalShow: {
			type: Boolean
		},
		operationTime: {
			type: Number
		},
		distance: {
			type: Number
		}
	},
	data() {
		return {
			tolong: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1753753917104_apgul1f8.png',
			error: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1753753965148_glk0pjpr.png',
			desc: ''
		};
	},
	methods: {
		comfire() {
			this.$emit('unNormalSignOut', this.desc);
			this.desc = '';
		}
	},

};
</script>

<style lang="scss" scoped>
.location {
	background: #fff;
	background: #ffffff;
	border-radius: 16rpx;
	width: 506rpx;
	// min-height: 478rpx;

	box-sizing: border-box;

	.content {
		padding: 20rpx 32rpx 0 32rpx;
	}

	.location_item {
		display: flex;

		justify-content: center;
		font-size: 28rpx;

	}

	.reson {
		// display: flex;
		// flex: 1;
		margin-top: 26rpx;
		margin-bottom: 8rpx;
		font-size: 24rpx;
	}

	.area {
		border: 1rpx solid #ccc;
		padding: 16rpx 20rpx;
	}

	.noLocation {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;

		text {
			display: flex;
			flex: 1;
		}
	}

	image {
		width: 64rpx;
		height: 64rpx;
	}

	.bottom {
		height: 75rpx;
		display: flex;
		margin-top: 50rpx;
		border-top: 2rpx solid #f5f5f5;

		view {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
		}

		.comfire {
			color: #999;
		}

		.cancle {
			border-right: 2rpx solid #f5f5f5;
			color: #0091ff;
		}
	}
}
</style>
